<div class="block-content upper-index no-padding">
<h1>Block lists</h1>
	
<div class="block-controls">
	<ul class="controls-buttons">
		<li><b>Required files:</b><br>
		common.css, simple-lists.css, block-lists.css</li>
		<li class="sep"></li>
		<li><b>Available in:</b><br>
		standard + mobile</li>
	</ul>
</div>
</div>

<div class="block-content no-title">
<h2>Favorites list</h2>

<div class="columns">
	<div class="colx3-left-double">
		<pre class="brush: html">
&lt;ul class="favorites"&gt;
	
	&lt;li&gt;
		&lt;img src="images/icons/web-app/48/Info.png" width="48" height="48"&gt;
		&lt;a href="#"&gt;Settings&lt;br&gt;
		&lt;small&gt;System &gt; Settings&lt;/small&gt;&lt;/a&gt;
	&lt;/li&gt;
	
	&lt;li&gt;
		&lt;img src="images/icons/web-app/48/Line-Chart.png" width="48" height="48"&gt;
		&lt;a href="#"&gt;Bandwidth usage&lt;br&gt;
		&lt;small&gt;Stats &gt; Server &gt; Bandwidth usage&lt;/small&gt;&lt;/a&gt;
	&lt;/li&gt;
	
	&lt;li&gt;
		&lt;img src="images/icons/web-app/48/Modify.png" width="48" height="48"&gt;
		&lt;a href="#"&gt;New post&lt;br&gt;
		&lt;small&gt;Write &gt; New post&lt;/small&gt;&lt;/a&gt;
	&lt;/li&gt;
	
	&lt;li&gt;
		&lt;img src="images/icons/web-app/48/Pie-Chart.png" width="48" height="48"&gt;
		&lt;a href="#"&gt;Browsers stats&lt;br&gt;
		&lt;small&gt;Stats &gt; Sites &gt; Browsers stats&lt;/small&gt;&lt;/a&gt;
	&lt;/li&gt;
	
	&lt;li&gt;
		&lt;img src="images/icons/web-app/48/Comment.png" width="48" height="48"&gt;
		&lt;a href="#"&gt;Manage comments&lt;br&gt;
		&lt;small&gt;Comments &gt; Manage comments&lt;/small&gt;&lt;/a&gt;
	&lt;/li&gt;
	
&lt;/ul&gt;
</pre>
	</div>
	<div class="colx3-right">
		<ul class="favorites">
			
			<li>
				<img src="images/icons/web-app/48/Info.png" width="48" height="48">
				<a href="javascript:void(0)">Settings<br>
				<small>System &gt; Settings</small></a>
			</li>
			
			<li>
				<img src="images/icons/web-app/48/Line-Chart.png" width="48" height="48">
				<a href="javascript:void(0)">Bandwidth usage<br>
				<small>Stats &gt; Server &gt; Bandwidth usage</small></a>
			</li>
			
			<li>
				<img src="images/icons/web-app/48/Modify.png" width="48" height="48">
				<a href="javascript:void(0)">New post<br>
				<small>Write &gt; New post</small></a>
			</li>
			
			<li>
				<img src="images/icons/web-app/48/Pie-Chart.png" width="48" height="48">
				<a href="javascript:void(0)">Browsers stats<br>
				<small>Stats &gt; Sites &gt; Browsers stats</small></a>
			</li>
			
			<li>
				<img src="images/icons/web-app/48/Comment.png" width="48" height="48">
				<a href="javascript:void(0)">Manage comments<br>
				<small>Comments &gt; Manage comments</small></a>
			</li>
			
		</ul>
	</div>
</div>
</div>

<div class="block-content no-title">
<h2>Shortcuts list</h2>

<div class="columns">
	<div class="colx3-left-double">
		<pre class="brush: html">
&lt;ul class="shortcuts-list"&gt;
	&lt;li&gt;&lt;a href="#"&gt;
		&lt;img src="images/icons/web-app/48/Bar-Chart.png" width="48" height="48"&gt; Stats
	&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href="#"&gt;
		&lt;img src="images/icons/web-app/48/Comment.png" width="48" height="48"&gt; Comments
	&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href="#"&gt;
		&lt;img src="images/icons/web-app/48/Email.png" width="48" height="48"&gt; Mail
	&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href="#"&gt;
		&lt;img src="images/icons/web-app/48/Delete.png" width="48" height="48"&gt; Exit
	&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href="#"&gt;
		&lt;img src="images/icons/web-app/48/Modify.png" width="48" height="48"&gt; Write
	&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href="#"&gt;
		&lt;img src="images/icons/web-app/48/Profile.png" width="48" height="48"&gt; My profile
	&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href="#"&gt;
		&lt;img src="images/icons/web-app/48/Search.png" width="48" height="48"&gt; Search
	&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</pre>
	</div>
	<div class="colx3-right">
		<ul class="shortcuts-list">
			<li><a href="javascript:void(0)">
				<img src="images/icons/web-app/48/Bar-Chart.png" width="48" height="48"> Stats
			</a></li>
			<li><a href="javascript:void(0)">
				<img src="images/icons/web-app/48/Comment.png" width="48" height="48"> Comments
			</a></li>
			<li><a href="javascript:void(0)">
				<img src="images/icons/web-app/48/Email.png" width="48" height="48"> Mail
			</a></li>
			<li><a href="javascript:void(0)">
				<img src="images/icons/web-app/48/Delete.png" width="48" height="48"> Exit
			</a></li>
			<li><a href="javascript:void(0)">
				<img src="images/icons/web-app/48/Modify.png" width="48" height="48"> Write
			</a></li>
			<li><a href="javascript:void(0)">
				<img src="images/icons/web-app/48/Profile.png" width="48" height="48"> My profile
			</a></li>
			<li><a href="javascript:void(0)">
				<img src="images/icons/web-app/48/Search.png" width="48" height="48"> Search
			</a></li>
		</ul>
	</div>
</div>
</div>

<div class="block-content no-title">
<h2>Files list</h2>

<div class="columns">
	<div class="colx3-left-double">
		<pre class="brush: html">
&lt;ul class="files"&gt;
	&lt;li&gt;&lt;a href="#"&gt;
		&lt;span&gt;&lt;img src="images/demo/files/file1-mini.png" width="64" height="45" class="thumb"&gt;&lt;/span&gt;
		Concept car.jpg
	&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href="#"&gt;
		&lt;span&gt;&lt;img src="images/demo/files/file2-mini.png" width="64" height="45" class="thumb"&gt;&lt;/span&gt;
		Concept car 2.jpg
	&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href="#"&gt;
		&lt;span&gt;&lt;img src="images/icons/finefiles/64/excel.png" width="64" height="64"&gt;&lt;/span&gt;
		Example.xls
	&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href="#"&gt;
		&lt;span&gt;&lt;img src="images/demo/files/file6-mini.png" width="64" height="45" class="thumb"&gt;&lt;/span&gt;
		Concept car 3.jpg
	&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href="#"&gt;
		&lt;span&gt;&lt;img src="images/icons/finefiles/64/text.png" width="64" height="64"&gt;&lt;/span&gt;
		Readme.txt
	&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href="#"&gt;
		&lt;span&gt;&lt;img src="images/icons/finefiles/64/swf.png" width="64" height="64"&gt;&lt;/span&gt;
		Animation.swf
	&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href="#"&gt;
		&lt;span&gt;&lt;img src="images/demo/files/file9-mini.png" width="64" height="45" class="thumb"&gt;&lt;/span&gt;
		Inside view.jpg
	&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href="#"&gt;
		&lt;span&gt;&lt;img src="images/icons/finefiles/64/pdf.png" width="64" height="64"&gt;&lt;/span&gt;
		Instructions.pdf
	&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href="#"&gt;
		&lt;span&gt;&lt;img src="images/icons/finefiles/64/mp3.png" width="64" height="64"&gt;&lt;/span&gt;
		My_favorite_song.mp3
	&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href="#"&gt;
		&lt;span&gt;&lt;img src="images/icons/finefiles/64/text.png" width="64" height="64"&gt;&lt;/span&gt;
		Copyright.txt
	&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</pre>
	</div>
	<div class="colx3-right">
		<ul class="files">
			<li><a href="javascript:void(0)">
				<span><img src="images/demo/files/file1-mini.png" width="64" height="45" class="thumb"></span>
				Concept car.jpg
			</a></li>
			<li><a href="javascript:void(0)">
				<span><img src="images/demo/files/file2-mini.png" width="64" height="45" class="thumb"></span>
				Concept car 2.jpg
			</a></li>
			<li><a href="javascript:void(0)">
				<span><img src="images/icons/finefiles/64/excel.png" width="64" height="64"></span>
				Example.xls
			</a></li>
			<li><a href="javascript:void(0)">
				<span><img src="images/demo/files/file6-mini.png" width="64" height="45" class="thumb"></span>
				Concept car 3.jpg
			</a></li>
			<li><a href="javascript:void(0)">
				<span><img src="images/icons/finefiles/64/text.png" width="64" height="64"></span>
				Readme.txt
			</a></li>
			<li><a href="javascript:void(0)">
				<span><img src="images/icons/finefiles/64/swf.png" width="64" height="64"></span>
				Animation.swf
			</a></li>
			<li><a href="javascript:void(0)">
				<span><img src="images/demo/files/file9-mini.png" width="64" height="45" class="thumb"></span>
				Inside view.jpg
			</a></li>
			<li><a href="javascript:void(0)">
				<span><img src="images/icons/finefiles/64/pdf.png" width="64" height="64"></span>
				Instructions.pdf
			</a></li>
			<li><a href="javascript:void(0)">
				<span><img src="images/icons/finefiles/64/mp3.png" width="64" height="64"></span>
				My_favorite_song.mp3
			</a></li>
			<li><a href="javascript:void(0)">
				<span><img src="images/icons/finefiles/64/text.png" width="64" height="64"></span>
				Copyright.txt
			</a></li>
		</ul>
	</div>
</div>
</div>

<div class="block-content no-title">
<h2>Grid list</h2>

<pre class="brush: html">
&lt;!-- The class dark-grey-gradient is optional, it just changes background color --&gt;
&lt;ul class="grid dark-grey-gradient"&gt;
	
	&lt;li&gt;
		
		&lt;!-- The class user displays a user icon, other available classes : computer, chart, print, warning --&gt;
		&lt;div class="grid-picto user"&gt;
			&lt;small&gt;Administrator&lt;/small&gt;
			&lt;p class="grid-name"&gt;John Doe&lt;/p&gt;
			&lt;p class="grid-details"&gt;Age: &lt;b&gt;28&lt;/b&gt;&lt;br&gt;
			Gender: &lt;b&gt;male&lt;/b&gt;&lt;br&gt;
			Country: &lt;b&gt;USA&lt;/b&gt;&lt;/p&gt;
		&lt;/div&gt;
		&lt;ul class="grid-actions"&gt;
			
			&lt;!-- Put anything you want in this list --&gt;
			&lt;li&gt;&lt;a href="#" title="Edit" class="with-tip"&gt;&lt;img src="images/icons/fugue/pencil.png" width="16" height="16"&gt;&lt;/a&gt;&lt;/li&gt;
			&lt;li&gt;&lt;a href="#" title="Delete" class="with-tip"&gt;&lt;img src="images/icons/fugue/cross-circle.png" width="16" height="16"&gt;&lt;/a&gt;&lt;/li&gt;
			&lt;li&gt;&lt;input type="checkbox" name="selected[]" id="grid-selected-1" value="1"&gt;&lt;/li&gt;
			
		&lt;/ul&gt;
	&lt;/li&gt;
	
	...
	
&lt;/ul&gt;
</pre>
	
<ul class="grid dark-grey-gradient">
	
	<li>
		<div class="grid-picto user">
			<small>Administrator</small>
			<p class="grid-name">John Doe</p>
			<p class="grid-details">Age: <b>28</b><br>
			Gender: <b>male</b><br>
			Country: <b>USA</b></p>
		</div>
		<ul class="grid-actions">
			<li><a href="javascript:void(0)" title="Edit" class="with-tip"><img src="images/icons/fugue/pencil.png" width="16" height="16"></a></li>
			<li><a href="javascript:void(0)" title="Delete" class="with-tip"><img src="images/icons/fugue/cross-circle.png" width="16" height="16"></a></li>
			<li><input type="checkbox" name="selected[]" id="grid-selected-1" value="1"></li>
		</ul>
	</li>
	
	<li>
		<div class="grid-picto computer">
			<small>Administrator</small>
			<p class="grid-name">John Doe</p>
			<p class="grid-details">Age: <b>28</b><br>
			Gender: <b>male</b><br>
			Country: <b>USA</b></p>
		</div>
		<ul class="grid-actions">
			<li><a href="javascript:void(0)" title="Edit" class="with-tip"><img src="images/icons/fugue/pencil.png" width="16" height="16"></a></li>
			<li><a href="javascript:void(0)" title="Delete" class="with-tip"><img src="images/icons/fugue/cross-circle.png" width="16" height="16"></a></li>
			<li><input type="checkbox" name="selected[]" id="grid-selected-2" value="2"></li>
		</ul>
	</li>
	
	<li>
		<div class="grid-picto chart">
			<small>Administrator</small>
			<p class="grid-name">John Doe</p>
			<p class="grid-details">Age: <b>28</b><br>
			Gender: <b>male</b><br>
			Country: <b>USA</b></p>
		</div>
		<ul class="grid-actions">
			<li><a href="javascript:void(0)" title="Edit" class="with-tip"><img src="images/icons/fugue/pencil.png" width="16" height="16"></a></li>
			<li><a href="javascript:void(0)" title="Delete" class="with-tip"><img src="images/icons/fugue/cross-circle.png" width="16" height="16"></a></li>
			<li><input type="checkbox" name="selected[]" id="grid-selected-3" value="3"></li>
		</ul>
	</li>
	
	<li>
		<div class="grid-picto print">
			<small>Administrator</small>
			<p class="grid-name">John Doe</p>
			<p class="grid-details">Age: <b>28</b><br>
			Gender: <b>male</b><br>
			Country: <b>USA</b></p>
		</div>
		<ul class="grid-actions">
			<li><a href="javascript:void(0)" title="Edit" class="with-tip"><img src="images/icons/fugue/pencil.png" width="16" height="16"></a></li>
			<li><a href="javascript:void(0)" title="Delete" class="with-tip"><img src="images/icons/fugue/cross-circle.png" width="16" height="16"></a></li>
			<li><input type="checkbox" name="selected[]" id="grid-selected-4" value="4"></li>
		</ul>
	</li>
	
	<li>
		<div class="grid-picto warning">
			<small>Administrator</small>
			<p class="grid-name">John Doe</p>
			<p class="grid-details">Age: <b>28</b><br>
			Gender: <b>male</b><br>
			Country: <b>USA</b></p>
		</div>
		<ul class="grid-actions">
			<li><a href="javascript:void(0)" title="Edit" class="with-tip"><img src="images/icons/fugue/pencil.png" width="16" height="16"></a></li>
			<li><a href="javascript:void(0)" title="Delete" class="with-tip"><img src="images/icons/fugue/cross-circle.png" width="16" height="16"></a></li>
			<li><input type="checkbox" name="selected[]" id="grid-selected-5" value="5"></li>
		</ul>
	</li>
	
	<li>
		<div class="grid-picto user">
			<small>Administrator</small>
			<p class="grid-name">John Doe</p>
			<p class="grid-details">Age: <b>28</b><br>
			Gender: <b>male</b><br>
			Country: <b>USA</b></p>
		</div>
		<ul class="grid-actions">
			<li><a href="javascript:void(0)" title="Edit" class="with-tip"><img src="images/icons/fugue/pencil.png" width="16" height="16"></a></li>
			<li><a href="javascript:void(0)" title="Delete" class="with-tip"><img src="images/icons/fugue/cross-circle.png" width="16" height="16"></a></li>
			<li><input type="checkbox" name="selected[]" id="grid-selected-6" value="6"></li>
		</ul>
	</li>
	
	<li>
		<div class="grid-picto user">
			<small>Administrator</small>
			<p class="grid-name">John Doe</p>
			<p class="grid-details">Age: <b>28</b><br>
			Gender: <b>male</b><br>
			Country: <b>USA</b></p>
		</div>
		<ul class="grid-actions">
			<li><a href="javascript:void(0)" title="Edit" class="with-tip"><img src="images/icons/fugue/pencil.png" width="16" height="16"></a></li>
			<li><a href="javascript:void(0)" title="Delete" class="with-tip"><img src="images/icons/fugue/cross-circle.png" width="16" height="16"></a></li>
			<li><input type="checkbox" name="selected[]" id="grid-selected-7" value="7"></li>
		</ul>
	</li>
	
</ul>
</div>

<div class="block-content no-title">
<h2>Tasks list</h2>

<p class="message warning">This style requires the file <strong>js/list.js</strong> to be fully fonctional.</p>

<p>Note: the task list doesn't use the &lt;ul&gt; tag, it's just a list of &lt;div&gt;.</p>

<pre class="brush: html">
&lt;!-- The class with-legend is inherited from the form classes, it add extra top padding for the legend to fit --&gt;
&lt;div class="task with-legend"&gt;
	
	&lt;!-- The legend --&gt;
	&lt;div class="legend"&gt;&lt;img src="images/icons/fugue/flag.png" width="16" height="16"&gt; Overdue task&lt;/div&gt;
	
	&lt;div class="task-description"&gt;
		
		&lt;!-- Task-list has special integration of the floating-tags class --&gt;
		&lt;ul class="floating-tags"&gt;
			&lt;li class="tag-time"&gt;5 days ago&lt;/li&gt;
			&lt;li class="tag-user"&gt;You&lt;/li&gt;
		&lt;/ul&gt;
		
		&lt;h3&gt;Task name&lt;/h3&gt;
		Small task description Lorem ipsum
	&lt;/div&gt;
	
	&lt;!-- Optional task dialog --&gt;
	&lt;ul class="task-dialog"&gt;
		&lt;li&gt;
			&lt;strong&gt;Marc:&lt;/strong&gt; Don't forget to tell the client &lt;em&gt;- Yesterday&lt;/em&gt;
			&lt;ul class="mini-menu"&gt;
				&lt;li&gt;&lt;a href="#" title="Send mail"&gt;&lt;img src="images/icons/fugue/mail.png" width="16" height="16"&gt;&lt;/a&gt;&lt;/li&gt;
				&lt;li&gt;&lt;a href="#" title="Delete comment"&gt;&lt;img src="images/icons/fugue/cross-circle.png" width="16" height="16"&gt; Delete&lt;/a&gt;&lt;/li&gt;
			&lt;/ul&gt;
		&lt;/li&gt;
		&lt;li&gt;
			&lt;strong&gt;John:&lt;/strong&gt; I suggest you could ask Dan or Sandy for a little help &lt;em&gt;- 2 hours ago&lt;/em&gt;
			&lt;ul class="mini-menu"&gt;
				&lt;li&gt;&lt;a href="#" title="Send mail"&gt;&lt;img src="images/icons/fugue/mail.png" width="16" height="16"&gt;&lt;/a&gt;&lt;/li&gt;
				&lt;li&gt;&lt;a href="#" title="Delete comment"&gt;&lt;img src="images/icons/fugue/cross-circle.png" width="16" height="16"&gt; Delete&lt;/a&gt;&lt;/li&gt;
			&lt;/ul&gt;
		&lt;/li&gt;
		
		&lt;!-- The class auto-hide will only reveal this element when task is hovered --&gt;
		&lt;li class="auto-hide"&gt;
			&lt;form name="task-1-comment" method="post" action="" class="form input-with-button"&gt;
				&lt;input type="text" name="comment" id="task-1-comment" value="" title="Enter comment..."&gt;
				&lt;button type="submit"&gt;Add&lt;/button&gt;
			&lt;/form&gt;
		&lt;/li&gt;
	&lt;/ul&gt;
&lt;/div&gt;
</pre>

<div class="task with-legend" style="margin-top:2em; width: 50%">
	<div class="legend"><img src="images/icons/fugue/status.png" width="16" height="16"> Standard task</div>
	
	<div class="task-description">
		<ul class="floating-tags">
			<li class="tag-time">5 days remain.</li>
			<li class="tag-tags">Server, disk</li>
			<li class="tag-user">You, Marc</li>
		</ul>
		
		<h3>Task name</h3>
		Small task description Lorem ipsum
	</div>
	
	<ul class="task-dialog">
		<li class="auto-hide">
			<form name="task-1-comment" method="post" action="" class="form input-with-button">
				<input type="text" name="comment" id="task-1-comment" value="" title="Enter comment...">
				<button type="submit">Add</button>
			</form>
		</li>
	</ul>
</div>

<div class="task with-legend" style="width: 50%">
	<div class="legend"><img src="images/icons/fugue/status-away.png" width="16" height="16"> Soon overdue task</div>
	
	<div class="task-description">
		<ul class="floating-tags">
			<li class="tag-time">Today</li>
			<li class="tag-tags">Website</li>
			<li class="tag-user">You</li>
		</ul>
		
		<h3>Task name</h3>
		Small task description Lorem ipsum
	</div>
	
	<ul class="task-dialog">
		<li class="auto-hide">
			<form name="task-1-comment" method="post" action="" class="form input-with-button">
				<input type="text" name="comment" id="task-1-comment" value="" title="Enter comment...">
				<button type="submit">Add</button>
			</form>
		</li>
	</ul>
</div>

<div class="task with-legend" style="width: 50%">
	<div class="legend"><img src="images/icons/fugue/flag.png" width="16" height="16"> Overdue task</div>
	
	<div class="task-description">
		<ul class="floating-tags">
			<li class="tag-time">5 days ago</li>
			<li class="tag-user">You</li>
		</ul>
		
		<h3>Task name</h3>
		Small task description Lorem ipsum
	</div>
	
	<ul class="task-dialog">
		<li>
			<strong>Marc:</strong> Don't forget to tell the client <em>- Yesterday</em>
			<ul class="mini-menu">
				<li><a href="javascript:void(0)" title="Send mail"><img src="images/icons/fugue/mail.png" width="16" height="16"></a></li>
				<li><a href="javascript:void(0)" title="Delete comment"><img src="images/icons/fugue/cross-circle.png" width="16" height="16"> Delete</a></li>
			</ul>
		</li>
		<li>
			<strong>John:</strong> I suggest you could ask Dan or Sandy for a little help <em>- 2 hours ago</em>
			<ul class="mini-menu">
				<li><a href="javascript:void(0)" title="Send mail"><img src="images/icons/fugue/mail.png" width="16" height="16"></a></li>
				<li><a href="javascript:void(0)" title="Delete comment"><img src="images/icons/fugue/cross-circle.png" width="16" height="16"> Delete</a></li>
			</ul>
		</li>
		<li class="auto-hide">
			<form name="task-1-comment" method="post" action="" class="form input-with-button">
				<input type="text" name="comment" id="task-1-comment" value="" title="Enter comment...">
				<button type="submit">Add</button>
			</form>
		</li>
	</ul>
</div>
</div>

<div class="block-content no-title">
<h2>Blocks list</h2>

<div class="columns">
	<div class="colx3-left-double">
		<pre class="brush: html">
&lt;ul class="blocks-list"&gt;
	&lt;!-- Simple block --&gt;
	&lt;li&gt;
		&lt;a href="#" class="float-left"&gt;&lt;img src="images/icons/fugue/status.png" width="16" height="16"&gt; Task name&lt;/a&gt;
	&lt;/li&gt;
	
	&lt;!-- Example of block with extra content on the right --&gt;
	&lt;li&gt;
		&lt;a href="#" class="float-left"&gt;&lt;img src="images/icons/fugue/status.png" width="16" height="16"&gt; Task name&lt;/a&gt;
		&lt;span class="tags float-right"&gt;(no tags)&lt;/span&gt;
	&lt;/li&gt;
	
	&lt;!-- Example of block with tags list --&gt;
	&lt;li&gt;
		&lt;a href="#" class="float-left"&gt;&lt;img src="images/icons/fugue/status.png" width="16" height="16"&gt; Task name&lt;/a&gt;
		&lt;ul class="tags float-right"&gt;
			&lt;li class="tag-time"&gt;5 days&lt;/li&gt;
			&lt;li class="tag-tags"&gt;Server&lt;/li&gt;
			&lt;li class="tag-user"&gt;You&lt;/li&gt;
		&lt;/ul&gt;
	&lt;/li&gt;
	
	...
	
&lt;/ul&gt;
</pre>
	</div>
	<div class="colx3-right">
		<ul class="blocks-list">
			<li>
				<a href="javascript:void(0)" class="float-left"><img src="images/icons/fugue/status.png" width="16" height="16"> Task name</a>
			</li>
			<li>
				<a href="javascript:void(0)" class="float-left"><img src="images/icons/fugue/status.png" width="16" height="16"> Task name</a>
				<span class="empty float-right">(no tags)</span>
			</li>
			<li>
				<a href="javascript:void(0)" class="float-left"><img src="images/icons/fugue/status.png" width="16" height="16"> Task name</a>
				<ul class="tags float-right">
					<li class="tag-time">5 days</li>
					<li class="tag-user">You</li>
				</ul>
			</li>
			<li>
				<a href="javascript:void(0)" class="float-left"><img src="images/icons/fugue/status.png" width="16" height="16"> Task name</a>
				<ul class="tags float-right">
					<li class="tag-time">5 days</li>
					<li class="tag-tags">Server</li>
				</ul>
			</li>
			<li>
				<a href="javascript:void(0)" class="float-left"><img src="images/icons/fugue/status.png" width="16" height="16"> Task name</a>
				<ul class="tags float-right">
					<li class="tag-tags">Server</li>
					<li class="tag-user">You</li>
				</ul>
			</li>
		</ul>
	</div>
</div>
</div>

<div class="block-content no-title">
<h2>Mini-blocks list</h2>

<div class="columns">
	<div class="colx3-left-double">
		<pre class="brush: html">
&lt;ul class="mini-blocks-list"&gt;
	&lt;!-- Simple block --&gt;
	&lt;li&gt;
		&lt;a href="#" class="float-left"&gt;&lt;img src="images/icons/fugue/status.png" width="16" height="16"&gt; Task name&lt;/a&gt;
	&lt;/li&gt;
	
	&lt;!-- Example of block with extra content on the right --&gt;
	&lt;li&gt;
		&lt;a href="#" class="float-left"&gt;&lt;img src="images/icons/fugue/status.png" width="16" height="16"&gt; Task name&lt;/a&gt;
		&lt;span class="empty float-right"&gt;(no tags)&lt;/span&gt;
	&lt;/li&gt;
	
	&lt;!-- Example of block with tags list --&gt;
	&lt;li&gt;
		&lt;a href="#" class="float-left"&gt;&lt;img src="images/icons/fugue/status.png" width="16" height="16"&gt; Task name&lt;/a&gt;
		&lt;ul class="tags float-right"&gt;
			&lt;li class="tag-time"&gt;5 days&lt;/li&gt;
			&lt;li class="tag-user"&gt;You&lt;/li&gt;
		&lt;/ul&gt;
	&lt;/li&gt;
	
	...
	
&lt;/ul&gt;
</pre>
	</div>
	<div class="colx3-right">
		<ul class="mini-blocks-list">
			<li>
				<a href="javascript:void(0)" class="float-left"><img src="images/icons/fugue/status.png" width="16" height="16"> Task name</a>
			</li>
			<li>
				<a href="javascript:void(0)" class="float-left"><img src="images/icons/fugue/status.png" width="16" height="16"> Task name</a>
				<span class="empty float-right">(no tags)</span>
			</li>
			<li>
				<a href="javascript:void(0)" class="float-left"><img src="images/icons/fugue/status.png" width="16" height="16"> Task name</a>
				<ul class="tags float-right">
					<li class="tag-time">5 days</li>
					<li class="tag-user">You</li>
				</ul>
			</li>
			<li>
				<a href="javascript:void(0)" class="float-left"><img src="images/icons/fugue/status.png" width="16" height="16"> Task name</a>
				<ul class="tags float-right">
					<li class="tag-time">5 days</li>
					<li class="tag-user">You</li>
				</ul>
			</li>
			<li>
				<a href="javascript:void(0)" class="float-left"><img src="images/icons/fugue/status.png" width="16" height="16"> Task name</a>
				<ul class="tags float-right">
					<li class="tag-time">5 days</li>
					<li class="tag-tags">Server</li>
				</ul>
			</li>
		</ul>
	</div>
</div>
</div>

<div class="block-content no-title">
<h2>Icon list</h2>

<div class="columns">
	<div class="colx2-left">
		<pre class="brush: html">
&lt;!-- The class icon-user sets the default icon for the whole list --&gt;
&lt;ul class="icon-list icon-user"&gt;
	
	&lt;!-- Element without link --&gt;
	&lt;li&gt;
		&lt;span class="icon"&gt;&lt;/span&gt;
		John Doe&lt;br&gt;
		&lt;small&gt;Male, 28&lt;/small&gt;
	&lt;/li&gt;
	
	&lt;!-- Element with link --&gt;
	&lt;li&gt;&lt;a href="#"&gt;
		&lt;span class="icon"&gt;&lt;/span&gt;
		John Doe&lt;br&gt;
		&lt;small&gt;Male, 28&lt;/small&gt;
	&lt;/a&gt;&lt;/li&gt;
	
	&lt;li&gt;&lt;a href="#"&gt;
		&lt;span class="icon"&gt;&lt;/span&gt;
		John Doe&lt;br&gt;
		&lt;small&gt;Male, 28&lt;/small&gt;
	&lt;/a&gt;&lt;/li&gt;
	
	&lt;!-- You can use a different icon for each element --&gt;
	&lt;li class="icon-image"&gt;...&lt;/li&gt;
	&lt;li class="icon-chart"&gt;...&lt;/li&gt;
	&lt;li class="icon-printer"&gt;...&lt;/li&gt;
	&lt;li class="icon-computer"&gt;...&lt;/li&gt;
	&lt;li class="icon-article"&gt;...&lt;/li&gt;
	&lt;li class="icon-comment"&gt;...&lt;/li&gt;
	&lt;li class="icon-warning"&gt;...&lt;/li&gt;
&lt;/ul&gt;
</pre>
	</div>
	<div class="colx2-right">
		<ul class="icon-list icon-user">
			<li>
				<span class="icon"></span>
				John Doe<br>
				<small>Male, 28</small>
			</li>
			<li><a href="javascript:void(0)">
				<span class="icon"></span>
				John Doe<br>
				<small>Male, 28</small>
			</a></li>
			<li><a href="javascript:void(0)">
				<span class="icon"></span>
				John Doe<br>
				<small>Male, 28</small>
			</a></li>
			<li class="icon-image"><a href="javascript:void(0)">
				<span class="icon"></span>
				John Doe<br>
				<small>Male, 28</small>
			</a></li>
			<li class="icon-chart"><a href="javascript:void(0)">
				<span class="icon"></span>
				John Doe<br>
				<small>Male, 28</small>
			</a></li>
			<li class="icon-printer"><a href="javascript:void(0)">
				<span class="icon"></span>
				John Doe<br>
				<small>Male, 28</small>
			</a></li>
			<li class="icon-computer"><a href="javascript:void(0)">
				<span class="icon"></span>
				John Doe<br>
				<small>Male, 28</small>
			</a></li>
			<li class="icon-article"><a href="javascript:void(0)">
				<span class="icon"></span>
				John Doe<br>
				<small>Male, 28</small>
			</a></li>
			<li class="icon-comment"><a href="javascript:void(0)">
				<span class="icon"></span>
				John Doe<br>
				<small>Male, 28</small>
			</a></li>
			<li class="icon-warning"><a href="javascript:void(0)">
				<span class="icon"></span>
				John Doe<br>
				<small>Male, 28</small>
			</a></li>
		</ul>
	</div>
</div>
</div>

<div class="block-content no-title">
<h2>Small files icon list</h2>

<p>This is the class used in the search result boxes</p>

<div class="columns">
	<div class="colx3-left-double">
		<pre class="brush: html">
&lt;!-- The class icon-html sets the icon for the whole list --&gt;
&lt;ul class="small-files-list icon-html"&gt;
	
	&lt;!-- Element without link --&gt;
	&lt;li&gt;
		&lt;strong&gt;Add&lt;/strong&gt; new user&lt;br&gt;
		&lt;small&gt;Users &gt; Add new user&lt;/small&gt;
	&lt;/li&gt;
	
	&lt;!-- Element with link --&gt;
	&lt;li&gt;
		&lt;a href="#"&gt;&lt;strong&gt;Add&lt;/strong&gt; new image&lt;br&gt;
		&lt;small&gt;Write &gt; Library &gt; Add new image&lt;/small&gt;&lt;/a&gt;
	&lt;/li&gt;
	
	...
	
&lt;/ul&gt;
</pre>
	</div>
	<div class="colx3-right">
		<ul class="small-files-list icon-html">
			<li>
				<strong>Add</strong> new user<br>
				<small>Users > Add new user</small>
			</li>
			<li>
				<a href="javascript:void(0)"><strong>Add</strong> new image<br>
				<small>Write > Library > Add new image</small></a>
			</li>
			<li>
				<a href="javascript:void(0)">Recently <strong>add</strong>ed comments<br>
				<small>Comments > Recently added comments</small></a>
			</li>
		</ul>
		
		<h3 class="small-margin">Available styles</h3>
		<ul class="small-files-list icon-html">
			<li>
				<a href="javascript:void(0)"><strong>HTML</strong> file<br>
				<small>class: icon-html</small></a>
			</li>
		</ul>
		<ul class="small-files-list icon-xml">
			<li>
				<a href="javascript:void(0)"><strong>XML</strong> file<br>
				<small>class: icon-xml</small></a>
			</li>
		</ul>
		<ul class="small-files-list icon-img">
			<li>
				<a href="javascript:void(0)"><strong>Image</strong> file<br>
				<small>class: icon-image</small></a>
			</li>
		</ul>
		<ul class="small-files-list icon-music">
			<li>
				<a href="javascript:void(0)"><strong>Music</strong> file<br>
				<small>class: icon-music</small></a>
			</li>
		</ul>
		<ul class="small-files-list icon-movie">
			<li>
				<a href="javascript:void(0)"><strong>Movie</strong> file<br>
				<small>class: icon-movie</small></a>
			</li>
		</ul>
		<ul class="small-files-list icon-folder">
			<li>
				<a href="javascript:void(0)"><strong>Folder</strong><br>
				<small>class: icon-folder</small></a>
			</li>
		</ul>
		<ul class="small-files-list icon-mail">
			<li>
				<a href="javascript:void(0)"><strong>Mail</strong><br>
				<small>class: icon-mail</small></a>
			</li>
		</ul>
		<ul class="small-files-list icon-comment">
			<li>
				<a href="javascript:void(0)"><strong>Comment</strong><br>
				<small>class: icon-comment</small></a>
			</li>
		</ul>
	</div>
</div>
</div>

<div class="block-content no-title">
<h2>Extended list</h2>

<pre class="brush: html">
&lt;!-- The class icon-user sets the default icon for the whole list --&gt;
&lt;ul class="extended-list icon-user"&gt;
	&lt;li&gt;
		&lt;!-- Main content --&gt;
		&lt;a href="#"&gt;
			&lt;span class="icon"&gt;&lt;/span&gt;
			John Doe&lt;br&gt;
			&lt;small&gt;Male, 28&lt;/small&gt;
		&lt;/a&gt;
		
		&lt;!-- Example use of the mini-menu --&gt;
		&lt;ul class="mini-menu"&gt;
			&lt;li&gt;&lt;a href="#" title="Edit"&gt;&lt;img src="images/icons/fugue/pencil.png" width="16" height="16"&gt;&lt;/a&gt;&lt;/li&gt;
			&lt;li&gt;&lt;a href="#" title="Send mail"&gt;&lt;img src="images/icons/fugue/mail.png" width="16" height="16"&gt;&lt;/a&gt;&lt;/li&gt;
			&lt;li&gt;&lt;a href="#" title="Delete"&gt;&lt;img src="images/icons/fugue/cross-circle.png" width="16" height="16"&gt; Delete&lt;/a&gt;&lt;/li&gt;
		&lt;/ul&gt;
		
		&lt;!-- You can add here any number of option blocks --&gt;
		&lt;ul class="extended-options"&gt;
			
			&lt;!-- Example block: progress --&gt;
			&lt;li&gt;
				Tasks: &lt;strong&gt;5/9&lt;/strong&gt;&lt;br&gt;
				&lt;progress class="progress-bar"&gt;&lt;span style="width:56%"&gt;&lt;/span&gt;&lt;/progress&gt;
			&lt;/li&gt;
			
			&lt;!-- Example block: rating --&gt;
			&lt;li&gt;
				Rating: &lt;strong&gt;3.4&lt;/strong&gt;&lt;br&gt;
				&lt;img src="images/icons/fugue/star.png" width="16" height="16"&gt;&lt;img src="images/icons/fugue/star.png" width="16" height="16"&gt;&lt;img src="images/icons/fugue/star.png" width="16" height="16"&gt;&lt;img src="images/icons/fugue/star-half.png" width="16" height="16"&gt;&lt;img src="images/icons/fugue/star-empty.png" width="16" height="16"&gt;
			&lt;/li&gt;
			
		&lt;/ul&gt;
	&lt;/li&gt;
	
	&lt;!-- You can set a custom icon for each element - see icon-list for available styles --&gt;
	&lt;li class="icon-computer"&gt;
		...
	&lt;/li&gt;
	
	...
	
&lt;/ul&gt;
</pre>

<ul class="extended-list icon-user">
	<li>
		<a href="javascript:void(0)">
			<span class="icon"></span>
			John Doe<br>
			<small>Male, 28</small>
		</a>
		
		<ul class="mini-menu">
			<li><a href="javascript:void(0)" title="Edit"><img src="images/icons/fugue/pencil.png" width="16" height="16"></a></li>
			<li><a href="javascript:void(0)" title="Send mail"><img src="images/icons/fugue/mail.png" width="16" height="16"></a></li>
			<li><a href="javascript:void(0)" title="Delete"><img src="images/icons/fugue/cross-circle.png" width="16" height="16"> Delete</a></li>
		</ul>
		
		<ul class="extended-options">
			<li>
				Tasks: <strong>5/9</strong><br>
				<progress class="progress-bar"><span style="width:56%"></span></progress>
			</li>
			<li>
				Rating: <strong>3.4</strong><br>
				<img src="images/icons/fugue/star.png" width="16" height="16"><img src="images/icons/fugue/star.png" width="16" height="16"><img src="images/icons/fugue/star.png" width="16" height="16"><img src="images/icons/fugue/star-half.png" width="16" height="16"><img src="images/icons/fugue/star-empty.png" width="16" height="16">
			</li>
		</ul>
	</li>
	<li class="icon-computer">
		<a href="javascript:void(0)">
			<span class="icon"></span>
			John Doe<br>
			<small>Male, 28</small>
		</a>
		
		<ul class="mini-menu">
			<li><a href="javascript:void(0)" title="Edit"><img src="images/icons/fugue/pencil.png" width="16" height="16"></a></li>
			<li><a href="javascript:void(0)" title="Send mail"><img src="images/icons/fugue/mail.png" width="16" height="16"></a></li>
			<li><a href="javascript:void(0)" title="Delete"><img src="images/icons/fugue/cross-circle.png" width="16" height="16"> Delete</a></li>
		</ul>
		
		<ul class="extended-options">
			<li>
				Tasks: <strong>5/9</strong><br>
				<progress class="progress-bar"><span style="width:56%"></span></progress>
			</li>
			<li>
				Rating: <strong>3.4</strong><br>
				<img src="images/icons/fugue/star.png" width="16" height="16"><img src="images/icons/fugue/star.png" width="16" height="16"><img src="images/icons/fugue/star.png" width="16" height="16"><img src="images/icons/fugue/star-half.png" width="16" height="16"><img src="images/icons/fugue/star-empty.png" width="16" height="16">
			</li>
		</ul>
	</li>
	<li>
		<a href="javascript:void(0)">
			<span class="icon"></span>
			John Doe<br>
			<small>Male, 28</small>
		</a>
		
		<ul class="mini-menu">
			<li><a href="javascript:void(0)" title="Edit"><img src="images/icons/fugue/pencil.png" width="16" height="16"></a></li>
			<li><a href="javascript:void(0)" title="Send mail"><img src="images/icons/fugue/mail.png" width="16" height="16"></a></li>
			<li><a href="javascript:void(0)" title="Delete"><img src="images/icons/fugue/cross-circle.png" width="16" height="16"> Delete</a></li>
		</ul>
		
		<ul class="extended-options">
			<li>
				Tasks: <strong>5/9</strong><br>
				<progress class="progress-bar"><span style="width:56%"></span></progress>
			</li>
			<li>
				Rating: <strong>3.4</strong><br>
				<img src="images/icons/fugue/star.png" width="16" height="16"><img src="images/icons/fugue/star.png" width="16" height="16"><img src="images/icons/fugue/star.png" width="16" height="16"><img src="images/icons/fugue/star-half.png" width="16" height="16"><img src="images/icons/fugue/star-empty.png" width="16" height="16">
			</li>
		</ul>
	</li>
	<li>
		<a href="javascript:void(0)">
			<span class="icon"></span>
			John Doe<br>
			<small>Male, 28</small>
		</a>
		
		<ul class="mini-menu">
			<li><a href="javascript:void(0)" title="Edit"><img src="images/icons/fugue/pencil.png" width="16" height="16"></a></li>
			<li><a href="javascript:void(0)" title="Send mail"><img src="images/icons/fugue/mail.png" width="16" height="16"></a></li>
			<li><a href="javascript:void(0)" title="Delete"><img src="images/icons/fugue/cross-circle.png" width="16" height="16"> Delete</a></li>
		</ul>
		
		<ul class="extended-options">
			<li>
				Tasks: <strong>5/9</strong><br>
				<progress class="progress-bar"><span style="width:56%"></span></progress>
			</li>
			<li>
				Rating: <strong>3.4</strong><br>
				<img src="images/icons/fugue/star.png" width="16" height="16"><img src="images/icons/fugue/star.png" width="16" height="16"><img src="images/icons/fugue/star.png" width="16" height="16"><img src="images/icons/fugue/star-half.png" width="16" height="16"><img src="images/icons/fugue/star-empty.png" width="16" height="16">
			</li>
		</ul>
	</li>
</ul>
</div>